<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <link rel="stylesheet" href="animate.css">
    <script src="jquery.min.js"></script>
</head>
<style>
    *{margin: 0;padding: 0}
    ul,li{list-style: none}
    .text-wrapper{
        width: 500px;
        height: 500px;
        border: 1px solid red;
        position: relative;
        float: left;
        overflow: hidden;
    }
    .text{
        width: 200px;
        height: 200px;
        background: #f05c5c;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-100px,-100px);
    }
    .item-list{width: 700px;float: left;
        overflow: hidden;}
    .item-list li{overflow: hidden;]}
    .item-list h1{
        font-size: 24px;
        text-align: center;
        color: blueviolet;
    }
    .item-list span{
        padding: 10px 15px;
        background: antiquewhite;
        color: #000;
        float: left;
        border-radius: 10px;
        margin: 10px;
        cursor: pointer;
    }
</style>
<body>
    <div class="text-wrapper" id="text-wrapper">
        <div class="text animated">测试animate动画</div>
    </div>
    <ul class="item-list">
        <li>
            <h1>Attention Seekers</h1>
            <span>bounce</span>
            <span>flash</span>
            <span>pulse</span>
            <span>rubberBand</span>
            <span>shake</span>
            <span>swing</span>
            <span>tada</span>
            <span>wobble</span>
        </li>
        <li>
            <h1>Bouncing Entrances</h1>
            <span>bounceIn</span>
            <span>bounceInDown</span>
            <span>bounceInLeft</span>
            <span>bounceInRight</span>
            <span>bounceInUp</span>
        </li>
        <li>
            <h1>Bouncing Exits</h1>
            <span>bounceOut</span>
            <span>bounceOutDown</span>
            <span>bounceOutLeft</span>
            <span>bounceOutRight</span>
            <span>bounceOutUp</span>
        </li>
        <li>
            <h1>Fading Entrances</h1>
            <span>fadeIn</span>
            <span>fadeInDown</span>
            <span>fadeInDownBig</span>
            <span>fadeInLeft</span>
            <span>fadeInLeftBig</span>
            <span>fadeInRight</span>
            <span>fadeInRightBig</span>
            <span>fadeInUp</span>
            <span>fadeInUpBig</span>
        </li>
        <li>
            <h1>Fading Exits</h1>
            <span>fadeOut</span>
            <span>fadeOutDown</span>
            <span>fadeOutDownBig</span>
            <span>fadeOutLeft</span>
            <span>fadeOutLeftBig</span>
            <span>fadeOutRight</span>
            <span>fadeOutRightBig</span>
            <span>fadeOutUp</span>
            <span>fadeOutUpBig</span>
        </li>
        <li>
            <h1>Flippers</h1>
            <span>flip</span>
            <span>flipInX</span>
            <span>flipInY</span>
            <span>flipOutX</span>
            <span>flipOutY</span>
        </li>
        <li>
            <h1>Lightspeed</h1>
            <span>lightSpeedIn</span>
            <span>lightSpeedOut</span>
        </li>
        <li>
            <h1>Rotating Entrances</h1>
            <span>rotateIn</span>
            <span>rotateInDownLeft</span>
            <span>rotateInDownRight</span>
            <span>rotateInUpLeft</span>
            <span>rotateInUpRight</span>
        </li>
        <li>
            <h1>Rotating Exits</h1>
            <span>rotateOut</span>
            <span>rotateOutDownLeft</span>
            <span>rotateOutDownRight</span>
            <span>rotateOutUpLeft</span>
            <span>rotateOutUpRight</span>
        </li>
        <li>
            <h1>Sliders</h1>
            <span>slideInDown</span>
            <span>slideInLeft</span>
            <span>slideInRight</span>
            <span>slideOutLeft</span>
            <span>slideOutRight</span>
            <span>slideOutUp</span>
        </li>
        <li>
            <h1>Specials</h1>
            <span>hinge</span>
            <span>rollIn</span>
            <span>rollOut</span>
        </li>
    </ul>
</body>
<script>
    $(function () {
        $('.item-list').find('span').each(function () {
            $(this).click(function () {
                var val=$(this).text()
                $('.text').attr('class','text animated '+val)
            })
        })
    })
</script>
</html>